<template>
  <div>
    <custom-card title="查询结果" class="mt-30">
      <template>
        <el-table border highlight-current-row style="width: 100%" :data="tableData" @current-change="selectCert" ref="certTable">
          <el-table-column type="expand">
            <template slot-scope="props">
              <div v-loading="historyLoading">
                <div v-if="!props.row.historyList">
                  请点击查看历史版本
                </div>
                <div v-else-if="!props.row.historyList.length">
                  暂无历史版本
                </div>
                <div v-else>
                  <el-table border style="width: 100%" :data="props.row.historyList">
                    <el-table-column align="center" label="证书编号" prop="certNo"></el-table-column>
                    <el-table-column align="center" label="认证类型" prop="certCategory"></el-table-column>
                    <el-table-column align="center" label="版本" prop="version"></el-table-column>
                    <el-table-column align="center" label="申请人" prop="createUserName"></el-table-column>
                    <el-table-column align="center" label="申请时间" prop="createTime"></el-table-column>
                    <el-table-column align="center" label="状态">
                      <template slot-scope="scope">
                        <span>{{scope.row.certStatus === 0 ? '有效' : scope.row.certStatus === 1 ? '已过期' : scope.row.certStatus === 2 ? '已作废' : ''}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                      <template slot-scope="scope">
                        <el-button @click="$router.push({path:'/cert/list/detail',query:{id:scope.row.id}})">查看详情</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="证书编号" prop="certNo"></el-table-column>
          <el-table-column align="center" label="产品型号" prop="plmModelNo"></el-table-column>
          <el-table-column align="center" label="产品名称" prop="productName"></el-table-column>
          <el-table-column align="center" label="认证类型" prop="certCategory"></el-table-column>
          <el-table-column align="center" label="版本" prop="version"></el-table-column>
          <el-table-column align="center" label="申请人" prop="createUserName"></el-table-column>
          <el-table-column align="center" label="申请时间" prop="createTime"></el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.certStatus === 0 ? '有效' : scope.row.certStatus === 1 ? '已过期' : scope.row.certStatus === 2 ? '已作废' : ''}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="130px">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click.stop="getHistory(scope.row, scope.$index)">查看历史版本</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination :pageData="pageData" @pageChange="changePage" @changeSize="changeSize"></pagination>

        <custom-card title="证书详情" v-if="detail.pdsCertInfo" v-loading="detailLoading">
          <el-tabs type="border-card" v-model="activeCard" class="el-tabs-cert">
            <el-tab-pane label="证书信息" name="info">
              <el-row>
                <el-col :span="6" v-for="(item, index) in basicInfo.info" :key="'info' + index">
                  {{item.label}}：{{detail.pdsCertInfo[item.name]}}
                </el-col>
              </el-row>
              <upload-list type="remark" :disable="true" v-model="detail.pdsCertInfo.list"></upload-list>
            </el-tab-pane>

            <el-tab-pane label="报告" name="report">
              <el-collapse :value="[0]">
                <el-collapse-item :title="'报告编号:' + option.certReportNo" :name="index" v-for="(option,index) in detail.reportList" :key="index">
                  <el-row>
                    <el-col :span="6" v-for="(item, index) in basicInfo.report" :key="'report' + index">
                      {{item.label}}：{{option[item.name]}}
                    </el-col>
                  </el-row>
                  <upload-list :disable="true" v-model="option.pdsCertReportFileList"></upload-list>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>

            <el-tab-pane label="CDF文档" name="cdf">
              <el-collapse :value="[0]">
                <el-collapse-item :title="'报告编号:' + option.certReportNo" :name="index" v-for="(option,index) in detail.cdfList" :key="index">
                  <div>版本号：{{option.version}}</div>
                  <div>备注：{{option.remark}}</div>
                  <upload-list :disable="true" v-model="option.pdsCertCdfFilesList"></upload-list>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
          </el-tabs>
        </custom-card>
      </template>
    </custom-card>
  </div>
</template>

<script>
import CustomCard from "@/components/CustomCard/index";
import UploadList from "@/components/UploadList/index";
import * as questApi from "@/api/cert/quest/index";
import * as listApi from "@/api/cert/list/index";
export default {
  name: 'certDetail',
  components: {
    CustomCard,
    UploadList
  },
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      pageData: {
        page: 1,
        limit: 10,
        total: 0
      },
      tableSelect: null,
      activeCard: 'info',
      detail: {},
      basicInfo: {
        info: [
          {
            label: "证书编号",
            name: "certNo"
          },
          {
            label: "证书有效期",
            name: "certEffectiveDate"
          },
          {
            label: "产品类型",
            name: ""
          },
          {
            label: "产品型号",
            name: ""
          },
          {
            label: "产品名称",
            name: ""
          },
          {
            label: "认证种类",
            name: "certCategory"
          },
          {
            label: "认证地区",
            name: "certArea"
          },
          {
            label: "认证机构",
            name: "certOrg"
          },
          {
            label: "生产厂家",
            name: "certManufacturer"
          },
          {
            label: "使用标准",
            name: "certStandard"
          },
          {
            label: "持证单位",
            name: "certLicensedUnit"
          },
          {
            label: "证书状态",
            name: "certStatus"
          },
          {
            label: "申请人",
            name: "createUserName"
          },
          {
            label: "申请日期",
            name: "createTime"
          },
          {
            label: "版本号",
            name: "version"
          },
          {
            label: "备注",
            name: ""
          }
        ],
        report: [
          {
            label: '证书编号',
            name: 'certNo'
          },
          {
            label: '报告编号',
            name: 'certReportNo'
          },
          {
            label: '报告有效期',
            name: 'certReportEffectiveDate'
          },
          {
            label: '报告状态',
            name: ''
          },
          {
            label: '使用标准',
            name: 'certStandard'
          },
          {
            label: '相关参数',
            name: 'params'
          },
          {
            label: '版本号',
            name: ''
          },
          {
            label: '备注',
            name: 'remark'
          }
        ]
      },
      detailLoading: false,
      historyLoading: false
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    /* 获取列表 */
    getList(params = {}) {
      let postParams = {}, methodName = '';
      console.log('asd',this.type)
      if(this.type === 'sale') {
        postParams = {...this.pageData, pcsId: this.$route.query.modelPbsId};
        methodName = 'getSaleList';
      } else if (this.type === 'pbsSale') {
        postParams = {...this.pageData, pbsId: this.$route.query.modelPbsId};
        methodName = 'getSalePbsList';
      } else {
        postParams = { ...this.pageData, ...params };
        methodName = 'getList';
      }
      questApi[methodName](postParams).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.rows;
          this.pageData.total = res.data.total;
        }
      });
    },
    changePage(pageData) {
      this.pageData.page = pageData.page;
      this.getList();
    },
    changeSize(pageSize) {
      this.pageData.limit = pageSize;
      this.pageData.page = 1;
      this.getList();
    },
    /* 查询 */
    search(params) {
      console.log('asdasd',params.productCategory)
      if (params.productCategory && params.productCategory.length) {
        params.productCategory = params.productCategory.slice(-1)[0];
      }
      this.getList(params);
      this.detail= {}
    },
    /* 选中列表行显示详情 */
    selectCert(val) {
      if (val && val.id) {
        this.detailLoading = true;
        questApi.getDetail({ id: val.id, plmModelNo: val.plmModelNo }).then(res => {
          if (res.code == 200) {
            this.detail = res.data;
            let certStatus = this.detail.pdsCertInfo.certStatus;
            this.detail.pdsCertInfo.certStatus = certStatus === 0 ? '有效' : certStatus === 1 ? '已过期' : certStatus === 2 ? '已作废' : '';
            this.detailLoading = false;
          }
        })
      }
    },
    /* 获取历史版本  */
    async getHistory(row, index) {
      this.$refs.certTable.toggleRowExpansion(row, true);
      if (row.historyList && row.historyList.length) {
        this.$refs.certTable.toggleRowExpansion(row, true);
      } else {
        this.historyLoading = true;
        let history = await questApi.getHistory({ certNo: row.certNo });
        this.$set(this.tableData[index], 'historyList', history.data)
        this.historyLoading = false;
        setTimeout(() => {
          this.$refs.certTable.toggleRowExpansion(row, true);
        })
      }
    }
  }
}
</script>
